<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建节点</title>
</head>
<body>
  <a href="#">我是超链接</a>

  <div id="list-a">
    <a href="javaScript:;" data-uri="xskdqs" data-sort="free">肖申克的救赎</a>
    <a href="javaScript:;" data-uri="plmxs" data-sort="pay">普罗米修斯</a>
    <a href="javaScript:;" data-uri="fczlm" data-sort="free">复仇者联盟</a>
    <a href="javaScript:;" data-uri="ayzc" data-sort="pay">爱乐之城</a>
  </div>
</body>
<script>
  // let div = document.createElement("div");
  // div.innerHTML = "你好";
  // document.body.appendChild(div);


  // 注释节点
  // let text = document.createComment("我是注释军");
  //文本节点
  // let text = document.createTextNode("我是注释军");
  // document.body.appendChild(text);

  var a = document.getElementsByTagName("a")[0];
  var div = document.createElement("div");
  div.innerHTML = "<p>我是段落标签</p>"
  document.body.appendChild(div);
  div.appendChild(a);//剪切节点功能

  list = document.createElement("ul");
  data = [
    {
      "title": "天下无贼",
      "area": "中国"
    },
    {
      "title": "复仇者联盟",
      "area": "美国"
    },
    {
      "title": "咒怨",
      "area": "日本"
    }
  ]
  
  div.appendChild(list);
  for(let i = 0; i < data.length; i++){
    var item = data[i];
    console.log(item);
    var li = document.createElement("li"),
        h2 = document.createElement("h2"),
        h4 = document.createElement("h4");
    
    h2.innerHTML = "《电影名》: " + item.title;
    h4.innerHTML = "国家 : " + item.area;
    li.appendChild(h2);
    li.appendChild(h4);
    list.appendChild(li);
  }
  list.setAttribute("class", "box");
  
  var links = document.getElementsByTagName("a");
  for(var i = 0; i < links.length; i++){
    (function(j){
      links[j].onclick = function(){
        var sort = this.dataset.sort;
        var uri = this.dataset.uri;
        if(sort === "free"){
          window.open("http://www.baidu.com/" + uri);
        }else{
          alert("这个是VIP影片!!!");
        }
      }
    })(i)
  }
  document.createDocumentFragment();

  // hasChildren
  /**
   * 作业1
   * 原型上编程 hasChildren 判断父元素有没有子元素节点
   * 
   * 作业2
   * 在原型上编程
   *  寻找兄弟元素节点
   *  参数N为正，找之后的第N个
   *  参数N为负，找之前的第N个
   *  参数N为零，找到自己
   * 
   * 作业3
   * 在原型上编程封装一个insertAfter方法
  */


  /*获取所有的子元素*/ 
  function getFullChildren(node){
    var children = node.children,
        len = children.length,
        item;
    
    if(node && node.nodeType === 1){
      console.log(node);
    }
    
    /*递归完成*/ 
    for(let i = 0; i < len; i++){
      item = children[i];

      if(item.nodeType === 1){
        getFullChildren(item);
      }
    }
  }
  var body = document.querySelector("body");
  getFullChildren(body);

  /*倒叙元素标签*/ 
  function flashback(node){
    var children = node.childNodes;
        len = children.length;
    while(len--){
      console.log(children[len])
      node.appendChild(children[len]);
    }
  }
  var listA = document.getElementById("list-a");
  flashback(listA);


  //向后添加元素
  Element.prototype.insertAefore = function(target, afterNode){
    var nextElem = afterNode.nextelementSibling;
    if(nextElem){
      this.insertBefore(target, afterNode);
    }else{
      this.appendChild(target);
    }
  }
  var oa = document.createElement("a");
  var ooa = div.getElementsByTagName("ul")[0];
  oa.innerHTML = "按钮";
  div.insertAefore(oa, ooa);


  var odiv = document.createElement("div"),
      oul = document.createElement("ul");     
  var gesu = function(num){
    if(arguments[0] === undefined || isNaN(parseInt(num))){
      console.log("Error: num no is number");
    }else{
      for(var i = 1; i <= num; i++){  
        oul.innerHTML += "<li>"+ i +"</li>";
      }
    }

    return oul;
  }
  odiv.innerHTML = gesu(5);
  document.body.appendChild(odiv);
  
  

  
</script>
</html>